<!-- 后台账号 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize" @changePage="changePage"
    @search="getSearchList" @changeTh="data.dialogVisible = true" @reset="handleReset">
    <template #form>
      <el-form-item :label="t('95')+'：'">
        <el-input v-model="data.query.account" :placeholder="t('340')" />
      </el-form-item>
    </template>
    <template #button>
      <el-button type="primary" @click="addEditItem({})" >{{t('639')}}</el-button>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content> {{item.tips}} </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'last_login_ip'" #default="scope">
            {{ scope.row.last_login_ip }}
            <span v-if="scope.row.last_login_ip">({{ scope.row.ip_country }})</span>
          </template>
          <template v-if="item.prop == 'last_login_time'" #default="scope">
            {{ setTimestampTime(scope.row.last_login_time) }}
          </template>
          <template v-if="item.prop == 'created_at'" #default="scope">
            {{ setTimestampTime(scope.row.created_at) }}
          </template>
        </el-table-column>
      </template>
      <el-table-column :label="t('97')" width="150">
        <template #header>
          <el-tooltip effect="dark" placement="top">
            <template #content> <div v-html=" t('640')"></div> </template>
            <el-icon class="ques-tips">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
          {{t('46')}}
        </template>
        <template #default="scope">
          <el-button type="warning" size="small" @click="addEditItem(scope.row)">
            {{t('98')}}
          </el-button>
          <el-button type="danger" size="small" @click="del(scope.row)">
            {{t('636')}}
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <TableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData" />

  <!-- 后台账号 -->
  <page-details :show="data.dialogDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import TableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import PageDetails from '@/views/account/page-details.vue'
import { setTimestampTime } from '@/utils/time'
import { getAccountList,deleteAccount } from '@/api/account'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    account: ''
  },
  list: [],
  total: 0,
  fields: [
    { label: t('642'), prop: 'nickname', width: '180', visible: true, tips: t('643') },
    { label: t('95'), prop: 'account', width: '150', visible: true, tips: t('644') },
    { label: t('633'), prop: 'role_name', width: '150', visible: true, tips: t('645') },
    { label: t('32'), prop: 'last_login_time', width: '180', visible: true, tips: t('646') },
    { label: t('24'), prop: 'created_at', width: '180', visible: true, tips: t('647') },
    { label: t('641'), prop: 'white_ip', width: '', visible: true, tips: t('648') }
  ],
  dialogVisible: false,
  dialogDetails: false,
  checkedItem: {} as any,
})

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  let res = await getAccountList(data.query)
  indexStore.setPageLoading(false)
  res.data?.list?.forEach((item:any) => {
    item.password = ''
  })
  
  data.list = res.data.list
  data.total = res.data.total
}

// 新增/编辑
const addEditItem = (row: Object) => {
  data.dialogDetails = true
  data.checkedItem = row
}

// 删除
interface rowType {
  id: number
  account: string
  nickname: string
}
const del = (row: rowType) => {
  ElMessageBox.confirm(`${ t('649') }【${row.account}】${row.nickname}？`, t('650'), {
    confirmButtonText: t('241'),
    cancelButtonText: t('651')
  }).then(async () => {
    await deleteAccount({ id: row.id })
    ElMessage({
      type: 'success',
      message: t('342')
    })
    getSearchList()
  }).catch(() => { })
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
// 重置
const handleReset = () => {
  data.query = {
    page: 1,
    size: 50,
    account: ''
  }
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const onHideDetails = (val: false) => {
  data.dialogVisible = false
  data.dialogDetails = false
  data.checkedItem =  {} as any
  if (val) {
    getSearchList()
  }
}
</script>

<style scoped lang="scss"></style>
